<template>
	<view class="container">
		<!-- 地图区域 -->
		<map id="map" class="map" :latitude="centerLatitude" :longitude="centerLongitude" :markers="markers" :scale="13"
			show-location :enable-zoom="true" :enable-scroll="true" @callouttap="handleMarkerTap"></map>

		<!-- 店铺信息卡片 -->
		<view class="store-info">
			<view class="store-header">
				<view class="title-box">
					<text class="store-name">伟业汽车维修厂(人民路店)</text>
					<view class="rating-box">
						<u-rate :count="5" v-model="store.rating" activeColor="gold" inactiveColor="gainsboro"></u-rate>
						<text>{{store.rating}}分</text>
					</view>
					<view class="info-item">
						<text>营业时间：周一至周日 09:00-22:00</text>
					</view>
					<view class="info-item">
						<text>人民路32号</text>
					</view>
				</view>
				<view class="image-box">
					<text class="distance">44m</text>
					<image class="store-img" src="/static/tuanzi/store1.jpg" mode="aspectFill"></image>
				</view>
			</view>

			<!-- <view class="info-content">
				<view class="info-item">
					<text>营业时间：周一至周日 09:00-22:00</text>
				</view>
				<view class="info-item">
					<text>人民路32号</text>
				</view>
			</view> -->
		</view>

		<!-- 固定在底部的按钮 -->
		<view class="footer-buttons">
			<view class="btn contact-btn" @click="contactStore">
				<text>联系门店</text>
			</view>
			<view class="btn booking-btn" @click="goToBooking">
				<text>立即预约</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				centerLatitude: 34.7466,
				centerLongitude: 113.6254,
				// 附近门店标签的位置
				labelPosition: {
					latitude: 34.7455,
					longitude: 113.6265,
				},
				store: {
					rating: 3,
					phone: '0371-12345678'
				}
			}
		},
		computed: {
			markers() {
				// 门店位置标记
				const stores = [{
						id: 1,
						name: '伟业汽车维修厂(人民路店)',
						latitude: 34.7466,
						longitude: 113.6254,
					},
					{
						id: 2,
						name: '伟业汽车维修厂(农业路店)',
						latitude: 34.7512,
						longitude: 113.6301,
					},
					{
						id: 3,
						name: '伟业汽车维修厂(花园路店)',
						latitude: 34.7388,
						longitude: 113.6229,
					},
					{
						id: 4,
						name: '伟业汽车维修厂(东风路店)',
						latitude: 34.7420,
						longitude: 113.6280,
					},
					{
						id: 5,
						name: '伟业汽车维修厂(纬五路店)',
						latitude: 34.7490,
						longitude: 113.6265,
					},
					{
						id: 6,
						name: '伟业汽车维修厂(金水路店)',
						latitude: 34.7445,
						longitude: 113.6290,
					}
				]

				const storeMarkers = stores.map(store => ({
					id: store.id,
					name: store.name,
					latitude: store.latitude,
					longitude: store.longitude,
					iconPath: '/static/tuanzi/定位2@2x.png',
					width: 32,
					height: 32
				}))

				// 附近门店标签
				const labelMarker = {
					id: 999,
					latitude: this.labelPosition.latitude,
					longitude: this.labelPosition.longitude,
					iconPath: '/static/tuanzi/定位2@2x.png',
					width: 32,
					height: 32,
					callout: {
						content: '附近门店',
						color: '#FFFFFF',
						fontSize: 12,
						bgColor: '#000000',
						padding: 5,
						borderRadius: 4,
						display: 'ALWAYS',
						textAlign: 'center'
					}
				}

				return [...storeMarkers, labelMarker]
			}
		},
		methods: {
			handleMarkerTap(e) {
				// console.log('标记点点击', e)
				if (e.markerId === 999) {
					// 点击"附近门店"标签，跳转到门店列表页面
					uni.navigateTo({
						url: '/pages/lly/strore/strore'
					})
				} 
			},
			contactStore() {
				uni.makePhoneCall({
					phoneNumber: this.store.phone
				})
			},
			goToBooking() {
				uni.navigateTo({
					url: '/pages/lly/yuyue/yuyue'
				})
			}
		}
	}
</script>

<style lang="scss">
	.container {
		height: 100vh;
		background-color: #f5f5f5;
		position: relative;
	}

	.map {
		width: 100%;
		height: 65vh;
	}

	.store-info {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 120rpx;
		background-color: #ffffff;
		border-radius: 20rpx 20rpx 0 0;
		padding: 30rpx;

		.store-header {
			display: flex;
			justify-content: space-between;
			margin-bottom: 20rpx;
			// background-color: cadetblue;

			.title-box {
				flex: 1;
				margin-right: 20rpx;

				.store-name {
					font-size: 32rpx;
					font-weight: 700;
					color: #333;
					margin-bottom: 12rpx;
					display: block;
				}

				.rating-box {
					display: flex;
					align-items: center;
					margin: 10rpx 0;

					.rating-count {
						font-size: 24rpx;
						color: #999;
						margin-left: 8rpx;
					}
				}
			}

			.image-box {
				text-align: right;

				.distance {
					display: block;
					font-size: 24rpx;
					font-weight: 600;
					color: #1989fa;
					margin-bottom: 8rpx;
				}

				.store-img {
					width: 140rpx;
					height: 100rpx;
					border-radius: 8rpx;
				}
			}
		}

		.info-item {
			font-size: 28rpx;
			margin-bottom: 12rpx;
		}
	}

	.footer-buttons {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		display: flex;
		padding: 20rpx 30rpx;
		background-color: #ffffff;
		box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);

		.btn {
			flex: 1;
			height: 88rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 32rpx;
			font-weight: 500;
			border-radius: 44rpx;

			&:active {
				opacity: 0.9;
			}
		}

		.contact-btn {
			background-color: #ffffff;
			border: 2rpx solid #1989fa;
			color: #1989fa;
			margin-right: 20rpx;
		}

		.booking-btn {
			background-color: #1989fa;
			color: #ffffff;
		}
	}
</style>